<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" sizes="any" mask="" href="../static/img/boxicon.png">


    <title>Depot仓储后台管理系统 | 登陆</title>


    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <!-- Font Awesome -->
    <!-- Ionicons -->
    <!-- Theme style -->
    <!-- iCheck -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
    <link href="../../static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../static/plugins/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../../static/plugins/adminLTE/css/AdminLTE.css" rel="stylesheet">
    <link href="../../static/plugins/iCheck/square/blue.css" rel="stylesheet">

    <style>
        body{
            background: url("../static/img/background.jpg") no-repeat center center;
            background-size: 100% 100%;
        }
    </style>
</head>

<body class="hold-transition">
    <div class="login-box">
        <div class="login-box-body" style="border-radius: 20px">
            <div class="login-logo">
                <a href="/index/frontData"><b>Depot仓储</b><br>后台管理系统</a>
            </div>
            <!-- /.login-logo -->
            <p class="login-box-msg">登录系统</p>

            <form action="/user/login" method="post">
                <div class="form-group has-feedback">
                    <input class="form-control" id="username" name="username" placeholder="用户名" type="text">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input class="form-control" id="password" name="password" placeholder="密码" type="password">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="row">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label><input id="remember" name="remember" type="checkbox"> 记住 下次自动登录</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <button class="btn btn-primary btn-block btn-flat" onclick="login()" type="button">登录</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <a class="pull-right" style="margin-top: 10px" href="registerPage.html">注册仓库实例 ></a>
                    </div>
                </div>
            </form>

        </div>
        <!-- /.login-box-body -->
        <div>
            <p class="alert alert-danger hide" id="message" style="border-radius: 20px">message</p>
        </div>
    </div>
    <!-- /.login-box -->

    <!-- jQuery 2.2.3 -->
    <!-- Bootstrap 3.3.6 -->
    <!-- iCheck -->
    <script src="../../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../../static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../static/plugins/iCheck/icheck.min.js"></script>
    <script>
        $(function () {
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
        });
    </script>
    <script>
        let message =document.getElementById("message");
        function login() {
            let timestamp= new Date().getTime();
            let username = document.getElementById("username").value;
            let password = md5('depot'+md5('repo'+document.getElementById("password").value+'depot')+'repo'+timestamp);
            let remember = $('#remember').is(':checked') ? 1 : 0;
            if(username===""){
                message.innerText="用户名不得为空";
                message.setAttribute("class","alert alert-danger");
            }else{
                if(password===""){
                    message.innerText="密码不得为空";
                    message.setAttribute("class","alert alert-danger");
                }
                else{
                    message.setAttribute("class","alert alert-danger hidden");
                    $.ajax({
                        url: "/user/login",
                        type: "post",
                        data: {
                            "username": username,
                            "password": password,
                            "timestamp": timestamp,
                            "remember": remember
                        },
                        success: function (msg) {
                            if (msg['status'] === 200) {
                                window.location.href = '/index/frontData'
                            } else {
                                message.innerText = "用户名或密码错误";
                                message.setAttribute("class", "alert alert-danger");
                            }
                        },
                    });
                }
            }
        }
    </script>
</body>

</html>